<template>
	<view class="pub-component" v-if="currShowModal">
		<view class="pub-modal">
			<view class="header">
				<text>新增账单类型</text>
				<text class="iconfont icon-close" @click="handleClickClose"></text>
			</view>
			<view class="body">
				<view class="add-type">
					<input type="text" v-model="name" placeholder="不能与以有类型名重复" @input="handleInput" />
				</view>
				<view class="add-btn">
					<button type="button" :class="[readShow ? '' : 'active_green']" :disabled="readShow" @click="submitType">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent, onMounted, ref, reactive, toRefs, watch} from 'vue'
	import {addAccountType} from '../../../api/app.js'
	export default defineComponent({
		props: {
			addTypeShowModal: {
				type: Boolean,
				default: false
			}
		},
		setup(props, context) {
			const state = reactive({
				currShowModal: false,
				readShow: true,
				name: ''
			})
			
			// 输入类型判断
			const handleInput = (e) => {
				console.log(e)
				const value = e.target.value
				if (value.length > 0) {
					state.readShow = false
				}
			}
			
			// 添加类型
			const submitType = () => {
				let params = {name: state.name}
				addAccountType(params).then(res=> {
					console.log(res)
					if (res.code === 200) {
						uni.showToast({
						    title: res.msg,
						    duration: 2000,
							icon: 'success'
						});
						state.name = ''
						context.emit('closeType')
					} else {
						uni.showToast({
						    title: res.message,
						    duration: 2000,
							icon: 'error'
						});
					}
				})
				
			}
		
			// 监听弹窗的状态
			watch(() => props.addTypeShowModal, (newVal)=> {
				state.currShowModal = newVal
			})
			// 关闭弹窗
			const handleClickClose = () => {
				state.name = ''
				context.emit('closeType')
			}
	
			
			return {
				...toRefs(state),
				handleClickClose,
				submitType,
				handleInput
			}
		}
	})
</script>

<style scoped>
	.pub-component{
		position: fixed;
		top: 0px;
		left: 0px;
		display: flex;
		align-items: flex-end;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.2);
	}
	.pub-modal{
		width: 100%;
		height: 45%;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		transition: 1s linear;
	}
	.pub-modal .header{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
	}
	.pub-modal .header text:nth-child(1) {
		font-size: 14px;
	}
	.pub-modal .header text:nth-child(2) {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 19px;
	}
	.body{
		padding: 30px;
		/* background: #eee; */
	}
	.add-type{
		/* margin-top: 20px; */
		margin-bottom: 50px;
	}
	.add-type input{
		padding: 15px 10px;
		background: #eee;
		border-radius: 4px;
	}
	
	.add-btn button{
		width: 40%;
		color: #333;
	}
	.add-btn .active_green{
		color: #fff;
		background: #038F42;
	}
</style>
